import React, { useEffect, useState } from 'react'
import requestApi from '../../config/requestApi'
import { Tag, Table  } from 'antd';
import Qs from 'qs'


function RankingList() {
    let timestamp = new Date().getTime();
    const [coverImgUrl, setCoverImgUrl] = useState(''),
          [playCount, setPlayCount] = useState(''),   //显示播放量
          [data, setData] = useState([]),
          [audio ,setAudio] = useState(''),
          [audioKongZhi ,setAudioKongZhi] = useState(0);

    const columns = [
    {
        title: '序号',
        dataIndex: 'orderNo',
        width: 80
    },
    {
        title: '标题',
        dataIndex: 'title',
        render: (text, record) => <div>{text} <a onClick={() => {boFang(record)}}>播放/暂停<audio src={audio} id='audio'></audio></a></div>
    },
    {
        title: '图片',
        dataIndex: 'picture',
        render: text => <img src={text} alt='' style={{width:80}}/>,
    },
    {
        title: '歌手',
        dataIndex: 'singer',
    },
    ];
    const boFang = (record) => {
        console.log(record);
        let timestamp = new Date().getTime();
        let params = {id:record.key, timestamp}
        params = Qs.stringify({...params});
        // requestApi('get', '/song/url',params).then(
        //     res => {
        //         console.log(res);
        //         //获取歌曲地址
        //         let songUrl = res.data.data[0].url;          
        //         setAudio(songUrl);
        //     }
        // ).catch(
        //     err => {
        //         console.log(err);
                
        //     }
        // )
        requestApi('get', '/song/url?id='+record.key).then(
            res => {
                console.log(res);
                //获取歌曲地址
                let songUrl = res.data.data[0].url;          
                setAudio(songUrl);
                let audio = document.getElementById('audio');
                console.log(audio);
                if(audioKongZhi === 0) {
                    audio.play();
                    setAudioKongZhi(1);
                }else{
                    audio.pause();
                    setAudioKongZhi(0);
                }
                
                
                
                
            }
        ).catch(
            err => {
                console.log(err);
                
            }
        )
    }
    useEffect(() => {
        console.log('haha');
        timestamp = new Date().getTime();
        let params = {id:19723756,timestamp};
        params = Qs.stringify({...params});
        //获取飙升榜的榜单
        requestApi('get', '/playlist/detail?id=19723756').then(
            res => {
                console.log(res);    
                setCoverImgUrl(res.data.playlist.coverImgUrl);   
                setPlayCount(res.data.playlist.playCount);
                console.log(res.data.playlist.tracks);
                let allSongs = res.data.playlist.tracks;
                let newData = [];
                for(let i=0; i< allSongs.length; i++){
                    newData.push({
                        key: allSongs[i].id,
                        orderNo: i+1,
                        title: allSongs[i].al.name,
                        picture: allSongs[i].al.picUrl,
                        singer: allSongs[i].ar[0].name

                    })
                    setData([...newData]);
                }
                
            }
        ).catch(
            err => {
                console.log(err); 
            }
        )
        
    }, [])

    return (
        <div>
            <div style={{display: 'flex'}}>
                <div> <img src={coverImgUrl} alt='' style={{width:80}}/></div>
                <div style={{width :'80px',lineHeight: '80px'}}>飙升榜</div>
                <div>
                    <div>歌曲列表 <Tag color="skyblue" style={{fontSize:15}}>累计播放:{playCount}</Tag><Tag color="orange" style={{fontSize:15}}>100首歌</Tag></div>
                    <div>
                        <Table columns={columns} dataSource={data} size='large' pagination={{ pageSize: 20 }} scroll={{ y: 440 }} style={{width: 1400}} />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default RankingList;
